<template>
  <view class="container">
    <view class="bg-white padding-sm">
      <view class="flex justify-start align-center padding-sm radius10 solid">
        <image
          :src="info.coverImg"
          class="radius5"
          mode=""
          style="width: 220rpx; min-width: 220rpx; height: 220rpx"
        ></image>
        <view class="margin-left-sm f-grow1">
          <view
            class="text-15 text-333 text-cut-2 text-bold"
            style="height: 79rpx; min-height: 79rpx"
          >
            {{ info.title }}
          </view>
          <view class="text-sm text-999 margin-top-xs">
            {{ info.typeName }}
          </view>
          <view class="flex justify-between align-center margin-top-xs">
            <view class="">
              <view class="color text-sm">
                ¥
                <text class="text-bold text-17">{{
                  parseFloat(info.courseFee / 100).toFixed(2)
                }}</text>
              </view>
              <view class="text-xs text-999 margin-top-xs">
                <text>已报名 {{ info.downNum }}</text
                ><text class="margin-left">浏览 {{ info.readNum }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="margin-sm bg-white padding-left-sm padding-right-sm padding-top padding-bottom radius10"
    >
      <view class="flex justify-start align-center">
        <view class="text-lg text-181818 text-bold"> 联系人： </view>
        <input
          type="text"
          v-model="linkName"
          class="text-15 bg-F4F4F4 padding-left-sm flex align-center round"
          style="height: 60rpx"
          value=""
          placeholder="请填写姓名"
        />
      </view>
      <view class="flex justify-start align-center margin-top">
        <view class="text-lg text-181818 text-bold"> 手机号： </view>
        <input
          type="number"
          v-model="phone"
          class="text-15 bg-F4F4F4 padding-left-sm flex align-center round"
          style="height: 60rpx"
          value=""
          placeholder="请填写手机号"
        />
      </view>
      <view class="flex justify-start align-center margin-top">
        <view class="text-lg text-181818 text-bold"> 身份证： </view>
        <input
          type="idcard"
          v-model="idCard"
          class="text-15 bg-F4F4F4 padding-left-sm flex align-center round"
          style="height: 60rpx"
          value=""
          placeholder="请填写身份证号"
        />
      </view>
    </view>
    <view class="margin-sm padding-sm radius10 bg-white">
      <view class="text-181818 text-df"> 选择支付方式 </view>
      <radio-group class="width-sub margin-top" @change="RadioChange">
        <view class="flex justify-between align-center">
          <view class="title text-13 flex justify-start align-center">
            <image
              :src="baseUrl + '/static/we-chat-pay.png'"
              mode=""
              style="width: 32rpx; height: 32rpx"
            >
            </image>
            <view class=""> 微信支付 </view>
          </view>
          <radio
            class="radio yellow"
            :class="radio == 'A' ? 'bg-white' : ''"
            :checked="radio == 'A' ? true : false"
            value="A"
          ></radio>
        </view>
        <view class="flex justify-between align-center margin-top-sm">
          <view class="title text-13 flex justify-start align-center">
            <image
              :src="baseUrl + '/static/balance.png'"
              mode=""
              style="width: 32rpx; height: 32rpx"
            >
            </image>
            <view class=""> 账户余额支付 </view>
          </view>
          <radio
            class="radio yellow"
            :class="radio == 'B' ? 'bg-white' : ''"
            :checked="radio == 'B' ? true : false"
            value="B"
          ></radio>
        </view>
      </radio-group>
    </view>
    <view class="round flex justify-between align-center a-fooder text-white">
      <view class="">
        <text class="text-sm">¥</text
        ><text class="text-20 text-bold">{{
          parseFloat(info.price / 100).toFixed(2)
        }}</text
        ><text class="text-xs margin-left-xs">报名费</text>
      </view>
      <button
        @click="toPay"
        class="bg-color text-15 round text-white text-bold flex justify-center align-center margin-right-xs"
        style="width: 268rpx; height: 82rpx"
      >
        立即支付
      </button>
    </view>
	<passkeyborad :money="info.price" @message='message' @close='close' :show="showPwd"></passkeyborad>
  </view>
</template>

<script>
import { checkIDCard } from "@/common/js/idCard.js";
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
export default {
	components: {
		passkeyborad
	},
  data() {
    return {
      baseUrl: this.$config.baseUrl,
      radio: "A",
      id: "",
      info: {},
      phone: "",
      linkName: "",
      idCard: "",
	  showPwd:false,
	  orderInfo:{}
    };
  },
  onLoad(options) {
    if (options.id) this.id = options.id;
    this.getInfo();
  },
  methods: {
    RadioChange(e) {
      this.radio = e.detail.value;
    },
    async getInfo() {
      const [err, res] = await this.$get(this.$api.training_details, {
        id: this.id,
      });
      if (res) {
        this.info = res.data;
        // console.log(res.data)
      }
    },
    async toPay() {
      uni.showLoading({
        title: "正在支付",
        mask: true,
      });
      let that = this;
      if (!this.linkName) {
        this.$util.msg("联系人不能为空");
      }
      if (!checkIDCard(this.idCard)) {
        return this.$util.msg("身份证号格式有误");
      }
      if (!this.phone) {
        this.$util.msg("手机号不能为空");
      }
      const [err, res] = await this.$post(this.$api.video_create, {
        type: 4,
        relateId: this.id,
        idCard: this.idCard,
        linkName: this.linkName,
        phone: this.phone,
      });

      if (res) {
        if (res.code == 200) {
			this.orderInfo = res.data
          if (this.radio == "A") {
            console.log(res);
            // #ifdef  MP-WEIXIN
            const data = {
              orderId: res.data.id,
              payWay: 1,
              appId: this.$config.wxAppId,
              openId: uni.getStorageSync("openid"),
            };
            // #endif

            // #ifdef  APP-PLUS
            const data = {
              orderId: res.data.id,
              payWay: 2,
              appId: this.$config.appId,
            };
            // #endif
            const [er, re] = await this.$get(this.$api.video_wxPay, data);
            if (re) {
              console.log(re);
              uni.hideLoading();
              const data = re.data;
              // #ifdef  MP-WEIXIN
              uni.requestPayment({
                provider: "wxpay",
                appId: data.appId,
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data._package,
                signType: data.signType,
                paySign: data.paySign,
                success: function (res) {},
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
              });
              // #endif

              // #ifdef  APP-PLUS
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: {
                  appid: data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: data.nonceStr, // 随机字符串
                  package: data._package, // 固定值
                  partnerid: data.partnerid, // 微信支付商户号
                  prepayid: data.prepayid, // 统一下单订单号
                  timestamp: data.timeStamp, // 时间戳（单位：秒）
                  sign: data.sign, // 签名，这里用的 MD5 签名
                },
                success(res) {},
                fail(e) {},
              });
              // #endif
            }
          } else {
			  uni.hideLoading();
			  this.showPwd = true
           
          }
        } else {
          this.$util.msg(res.message);
          uni.hideLoading();
        }
      }
    },
	close() {
		this.showPwd = false
	},
	async message(password) {
		// console.log(password)
		let that = this
		var CusBase64 = require('@/common/js/base64.js');
		//函数调用
		var passWord = CusBase64.CusBASE64.encoder(password);
		this.$get(this.$api.verifyPayPassWord, {
			passWord,
			userId: uni.getStorageSync('userId')
		}).then(res => {
			const [err, rs] = res
			if (rs) {
				that.balancePay()
			}
			if (err) {
				this.showPwd = false
				if (err.message == '请去设置密码！') {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pagesA/pages/setPassword/setPassword'
						})
					}, 1500)
				}
			}
		})
	
	},
	async balancePay(){
		const [error, re] = await this.$post(this.$api.video_accountPay, {
		  orderId: this.orderInfo.id,
		});
		if (re) {
		  // console.log(re);
		  this.showPwd = false
		  this.$util.msg(re.data);
		  // uni.hideLoading();
		  setTimeout(() => {
		    uni.navigateBack();
		  }, 1500);
		}
	}
  },
};
</script>

<style lang="scss" scoped>
.a-fooder {
  height: 102rpx;
  position: fixed;
  left: 20rpx;
  right: 20rpx;
  bottom: 30rpx;
  background: #343434;
  padding-left: 50rpx;
}
</style>
